<template>
    <div>
        <h3>会员列表</h3>
       <div>
       姓名:<input type="text" v-model="info.userName">
        手机号:<input type="text" v-model="info.tel">
        会员等级:
        <select v-model="info.levelId">
            <option value="">请选择</option>
            <option :value="item.id" v-for="item in LevelList">{{item.levelName}}</option>
        </select>
        <input type="button" value="查询" class="btn btn-primary" @click="getMembersList">
        <input type="button" value="重置" class="btn btn-danger" @click="reset">
       </div>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>手机号</td>
                    <td>证件类型</td>
                    <td>证件号码</td>
                    <td>出生日期</td>
                    <td>性别</td>
                    <td>状态</td>
                    <td>金额</td>
                    <td>爱好</td>
                    <td>会员等级</td>
                    <td>操作</td>
                </tr>
                 <tr v-for="item in list" :key="item.id">
                    <td>{{item.memberCode}}</td>
                    <td>{{item.userName}}</td>
                    <td>{{item.tel.substring(0,3)+'****'+item.tel.substring(7)}}</td>
                    <td>{{item.cardType}}</td>
                    <td>{{item.card}}</td>
                    <td>{{moment(item.birthDay).format('YYYY-MM-DD')}}</td>
                    <td>{{item.gender==1?'男':'女'}}</td>
                    <td>{{item.state==true?'启用':'禁用'}}</td>
                    <td>{{item.money}}</td>
                    <td>{{item.likes}}</td>
                    <td>{{item.levelName}}</td>
                    <td>
                        <input type="button" value="删除" class="btn btn-danger" @onclick="del(item.id)">
                        <input type="button" value="修改" class="btn btn-warning"@click="update(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import{onMounted,ref,reactive}from 'vue'
import axios from 'axios'
import moment from 'moment';
import { useRouter } from 'vue-router';
const router=useRouter();
//声明一个变量向后端传参数
let info:any=reactive({
    userName:'',
    tel:'',
    levelId:''
})
let list:any=ref([])

onMounted(()=>{
    //获取会员列表
    getMembersList();
    getLevelList();
})
//删除   传参：函数传参
const del = (id: any) => {
  console.log(id);
  //1.友好提示
  var f = confirm('请问您确定要删除吗？'); //true / false
  if (f) {
    //2.发送请求删除操作
    axios({
      url: '/api/Member/DelMemberItem',
      method: 'delete',
      params: {
        id: id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          //3.更新页面
          getMembersList();
        } else {
          alert('删除失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
//重置
const reset=()=>{
    info.username='';
    info.tel='';
    info.levelId='';
    getMembersList();
};

//修改
//第一步跳转 传递参数   路由传参
//根据路径创建视图     配置视图规则   视图的内容为添加页面的内容`
const update=(id:any)=>{
    router.push({
        path:'/memberUpdate',
        query:{id:id}
    });
}

//绑定下拉
let LevelList:any=ref([]);
//获取会员等级列表
const getLevelList=()=>{
    axios({
        url:'/api/Member/GetMemberList',
        method:'get'
    })
    .then((res)=>{
         console.log(res);
         LevelList.value=res.data;
    })  
    .then((err)=>{
         console.log(err);
    })  
};
//显示
const getMembersList=()=>{
    axios({
        url:'/api/Member/GetMembersList',
        method:'get',
        params:info
    })
    .then((res)=>{
        console.log(res);
        list.value=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}

</script>

<style scoped>
input[type='button'] {
  margin: 0 5px;
}
</style>